<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.w3.org/1999/xhtml">
	<head th:replace="admin/_fragments :: head(~{::title})">
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>登陆页面</title>
		<!-- 引入Semantic UI -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
		<link rel="stylesheet" type="text/css" href="../../static/css/customize.css" />
	</head>
	<body>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
		<div class="m-container-small m-padded-tb-massive"  style="max-width:30em !important;">
			<div class="ui container">
				<div class="ui middle aligned center aligned grid">
					<div class="column">
						<h2 class="ui teal image header">
							<div class="content">
								博客管理后台登录
							</div>
						</h2>
						<form class="ui large form" method="post" th:action="@{/admin/login}">
							<div class="ui  segment">
								<div class="field">
									<div class="ui left icon input">
										<i class="user icon"></i>
										<input type="text" name="username" placeholder="请输入用户名">
									</div>
								</div>
								<div class="field">
									<div class="ui left icon input">
										<i class="lock icon"></i>
										<input type="password" name="password" placeholder="请输入密码">
									</div>
								</div>
								<button class="ui fluid large teal submit button">Login</button>
							</div>

							<div class="ui mini error message"></div>
							<div class="ui mini negative message" th:unless="${#strings.isEmpty(message)}" th:text="${message}">用户名和密码错误</div>
						</form>
					</div>
				</div>
			</div>
		</div>

		<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
		<script>
			$('.ui.form').form({
				fields: {
					username : {
						identifier: 'username',
						rules: [{
							type: 'empty',
							prompt: '请输入用户名'
						}]
					},
					password : {
						identifier: 'password',
						rules: [{
							type: 'empty',
							prompt: '请输入密码'
						}]
					}
				}
			});
		</script>
	</body>
</html>
